let cavnas = document.getElementById('cvs')
    let context = cavnas.getContext('2d')
    let a1 = new Image()
    a1.src = './assets/a1.png'
    // a1.src = './assets/a2-1.png'
    // a1.src = './assets/a2-2.png'
    // a1.src = './assets/control-panel.png'
    let border = []
    let offsetY = 150
    let imgW = 152,imgH = 115;
    // let imgW = 108,imgH = 80;
    // let imgW = 256,imgH = 256;
    a1.onload = function(){
      context.drawImage(a1,0,0,imgW,imgH)
      let imgData = context.getImageData(0,0,imgW,imgH)
      console.log(imgData);
      let data = imgData.data
      
      let pixArr = []
      // let martix = []
      // // console.log(data);
      for(let i = 0; i < data.length; i+= 4){
        pixArr.push({r:data[i],g:data[i+1],b:data[i+2],a:data[i+3],x:i / 4 % imgData.width,y: Math.floor(i / 4 / imgData.width)})
      }
      // ------
      // let temp
      // for(let i = 0 ; i < pixArr.length; i++){        
      //   if(i % imgData.width === 0){
      //     temp = []
      //     martix.push(temp)
      //   }
      //   temp.push(pixArr[i])
      // }

      // console.log(martix)

      // for(let i = 0; i < martix.length;i++){
      //   let current = martix[i]
      //   for(let j = 0 ; j < current.length;j++){
      //     if(
      //       (martix[i][j-1]?.a === 0 && martix[i][j].a !== 0) ||
      //       (martix[i][j+1]?.a === 0 && martix[i][j].a !== 0) ||
      //       (martix[i-imgData.width] && martix[i-imgData.width][j]?.a === 0 && martix[i][j].a !== 0) ||
      //       (martix[i+imgData.width] && martix[i+imgData.width][j]?.a === 0 && martix[i][j].a !== 0)
      //     ){
      //       border.push(martix[i][j])
      //     }
      //   }
      // }

      //----

      border = pixArr.filter((e,i,arr)=>{
        return (arr[i-1]?.a === 0 && e.a !== 0) || 
        (arr[i+1]?.a === 0 && e.a !== 0) || 
        (arr[i-imgData.width] && arr[i-imgData.width]?.a ===0 && e.a !== 0) || 
        (arr[i+imgData.width] && arr[i+imgData.width]?.a ===0 && e.a !== 0) ||
        (!arr[i-imgData.width] && e.a !== 0) ||
        (!arr[i+imgData.width] && e.a !== 0) ||
        (!arr[i-1] && e.a !== 0) ||
        (!arr[i+1] && e.a !== 0)
      })

      // border = pixArr.filter((e,i,arr)=>{
      //   return (arr[i-1]?.a === 0 && e.a === 255) || 
      //   (arr[i+1]?.a === 0 && e.a === 255) || 
      //   (arr[i-imgData.width] && arr[i-imgData.width]?.a ===0 && e.a === 255) || 
      //   (arr[i+imgData.width] && arr[i+imgData.width]?.a ===0 && e.a === 255) ||
      //   (!arr[i-imgData.width] && e.a === 255) ||
      //   (!arr[i+imgData.width] && e.a === 255) ||
      //   (!arr[i-1] && e.a === 255) ||
      //   (!arr[i+1] && e.a === 255)
      // })

      console.log(border);
      border.forEach(e=>{
        context.fillStyle = `rgba(${e.r},${e.g},${e.b},${e.a})`
        context.fillRect(e.x,e.y + offsetY,1,1)
      })
    }
    window.addEventListener('touchmove',e=>{
      e.preventDefault()
    })